<template>
    <div>
        <div class="main-head flex-between container-fluid">
            <div class="title">
                <h1 v-text="$t('pro.createFilterList.createFilterListName')"></h1>
            </div>
        </div>
        <div class="content container-fluid">
            <div class="breadcrumb">
                <a-breadcrumb :routes="routes">
                    <template slot="itemRender" slot-scope="{route, params, routes, paths}">
                        <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
                        <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{route.breadcrumbName}}
                        </router-link>
                    </template>
                </a-breadcrumb>
            </div>

            <a-spin :tip="$t('pro.public.loading')" :spinning="loading">
                <div class="portlet">
                    <a-form class="filter-list-form" :form="form" @submit="handleSubmit">
                        <div class="list-name grid">
                            <a-form-item :label="$t('pro.createFilterList.listName')">
                                <a-input
                                    v-decorator="[
                                    'listName',
                                        {
                                            rules: [{
                                            required: true,
                                            message: $t('pro.createFilterList.listNamePlaceholder')
                                            }]
                                        }
                                ]"
                                ></a-input>
                            </a-form-item>
                        </div>

                        <div class="list-setting grid">
                            <a-form-item
                                v-for="(item,key) in textareaPlaceholder"
                                :key="key"
                                :label="item.label"
                                :validate-status="item.validateStatus"
                                :help="item.errorMsg"
                            >
                                <a-textarea
                                    :rows="6"
                                    :placeholder="item.placeholder"
                                    v-decorator="[
                                    `${key}`,
                                        {
                                            rules: [{
                                            whitespace: true,
                                            message: $t('pro.createFilterList.message') +item.label+ '!'
                                            }]
                                        }
                                ]"
                                ></a-textarea>
                            </a-form-item>
                        </div>
                        <template v-if="empty">
                            <p style="color:#f5222d;margin-top: 10px;" v-text="$t('pro.createFilterList.minList')"></p>
                        </template>
                        <a-form-item class="submit-btn">
                            <a-button type="primary" html-type="submit" v-text="$t('pro.public.buttonCreate')"></a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-spin>
        </div>
    </div>
</template>

<script>
    import { addFilterList } from "@/api/filter-list";

    export default {
        data() {
            return {
                labelCol: { span: 7 },
                wrapperCol: { span: 12 },
                form: this.$form.createForm(this),
                basePath: "",

                empty: false,
                loading: false,
                errorBorder: true,
            };
        },
        methods: {
            handleSubmit(e) {
                this.loading = true;
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (err == null) {
                        let content = Object.values(values)
                        content.shift();
                        let notNull = content.some(function (item) {
                            return item !== undefined
                        });
                        if (notNull){
                            this.empty = false
                        } else {
                            this.empty = true
                            this.loading = false;
                        }
                        if (notNull){
                            let that = this
                            addFilterList(JSON.stringify(values))
                                .then(res => {
                                    if (res.data.code == 200) {
                                        let keys = Object.keys(values)
                                        keys.shift();
                                        //恢复文本域状态
                                        keys.forEach(key=>{
                                            that.textareaPlaceholder[key].validateStatus = 'success'
                                            that.textareaPlaceholder[key].errorMsg = ""
                                        })
                                        this.$message.success(this.$t('pro.createFilterList.createSuccess'));
                                        this.$router.push({
                                            path: "/bidder/filterlist"
                                        });
                                    }else if(res.data.code == 400) {
                                        Object.keys(values).forEach(key=>{
                                            res.data.data.forEach(item =>{
                                                if (item[key] == '4002') {
                                                    this.textareaPlaceholder[key].validateStatus = 'error';
                                                    this.textareaPlaceholder[key].errorMsg = this.textareaPlaceholder[key].label + this.$t('pro.viewFilterList.errorMeg');
                                                    this.loading = false
                                                }
                                            })
                                        })
                                    }
                                })
                                .catch(() => {
                                    this.$message.error(this.$t('pro.createFilterList.createError'));
                                    this.loading = false
                                });
                        }
                    }else {
                        this.loading = false
                    }
                });
            },
        },
        computed:{
            routes(){
                const router = [
                    {
                        path: "/bidder/filterlist",
                        breadcrumbName: this.$t('pro.public.header.FilterList')
                    },
                    {
                        path: "second",
                        breadcrumbName: this.$t('pro.createFilterList.createFilterListName')
                    }
                ]
                return router
            },

            textareaPlaceholder() {
                return JSON.parse(JSON.stringify(this.$t('pro.textareaPlaceholder')))
            }
        }
    };
</script>


<style scoped>
    .ant-form-item {
        margin-bottom: 0;
    }

    .submit-btn {
        margin-top: 20px;
    }

    .list-name,
    .list-setting {
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
    }

    .list-name > div {
        grid-column: 1 / 3;
    }

    @media screen and (max-width: 1675px) {
        .list-name,
        .list-setting {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    @media screen and (max-width: 1420px) {
        .list-name,
        .list-setting {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media screen and (max-width: 1160px) {
        .list-name,
        .list-setting {
            grid-template-columns: repeat(3, 1fr);
        }

        .list-name > div {
            grid-column: 1;
        }
    }

    @media screen and (max-width: 830px) {
        .list-name,
        .list-setting {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media screen and (max-width: 640px) {
        .list-name,
        .list-setting {
            grid-template-columns: repeat(1, 1fr);
        }
    }
</style>

